<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #bfa;
       /* 
         定位（position）
              -定位是更高级的布局手段
              - 通过定位可以将元素摆放到页面的任意位置
              - 使用position属性来设置定位
                  可选值：
                  static 默认值 元素是静止的没开启定位
                  relative 开启元素的相对定位
                  absolute 开启元素的绝对定位
                  sticky 开启元素的粘滞定位
                  fixed 开启元素的固定定位

                - 相对定位：
                  - 当元素的position属性值设置为relative时则开启了元素的相对定位
                  - 相对定位的特点
                     1、元素开启定位以后，如果不设置偏移量元素不会发生任何的变化
                     2.相对定位是参照于元素在文档流中的位置定位的

                - 偏移量（offset）
                    - 当元素开启了定位后，可以通过偏移量来设置元素的位置
                      top
                          - 定位元素和定位位置上边的距离
                    bottom
                          - 定位元素和定位位置下边距离

                          - 定位元素垂直方向的位置由top和bottom两个属性来控制
                              通常情况下我们只会使用其一
                          - top值越大定位元素越往下移动
                          - bottom值越大，定位元素越往上移动

                    left
                        - 定位元素和定位位置左侧的距离

                    right
                        - 定位元素和定位位置右侧的距离

                        - 定位元素水平方向的位置有left和right两个属性控制
                          通常只是用一个

                        - left 越大元素越靠右
                        - right越大元素越靠左
       */
       position: relative;
      left:200px;
      top: -200px;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: #bfa;
    margin: 200px;
    }
        </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>